<template>
  <el-container>
    <el-row>
      <el-col :span="24" class="headercontainer">
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          active-text-color="#ffd04b"
          router
        >
          <el-menu-item index="/main/staffinfo">员工信息</el-menu-item>
          <el-menu-item index="/main/shopinfo">门店信息</el-menu-item>
          <el-menu-item index="/main/stafflogin">员工登录日志</el-menu-item>
          <el-menu-item index="/main/position">职位管理</el-menu-item>
          <!-- <el-menu-item index="/main/jurisdiction">权限管理</el-menu-item> -->
        </el-menu>
      </el-col>
    </el-row>
    <el-header>
      <div id="search">
        <div class="search-container">
          <!-- <div class="search-title">查询</div> -->
          <el-form :inline="true" :model="formInline" class="form-search">
            <el-form-item label="搜索：" class="search-item">
              <el-input
                v-model="formInline.search"
                placeholder="可以根据店铺ID进行搜索"
              ></el-input>
            </el-form-item>
            <el-form-item class="search-item">
              <el-button type="success" icon="el-icon-search" @click="Search"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-header>
    <el-main class="tablem">
      <div class="border">
        <div class="tablepad">
          <span style="margin-right: auto">门店信息</span>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-circle-plus-outline"
            @click="addshop"
            >添加</el-button
          >
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="delallshop"
            >批量删除</el-button
          >
        </div>
        <div class="tablepad">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            class="fontsize"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="name" label="门店名称"> </el-table-column>
            <el-table-column label="营业状态">
              <template slot-scope="obj">
                <el-switch
                  v-model="obj.row.status"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="1"
                  :inactive-value="0"
                  disabled
                >
                </el-switch
              ></template>
            </el-table-column>
            <el-table-column prop="provinceName" label="省份"></el-table-column>
            <el-table-column prop="address" label="详细地址 "></el-table-column>

            <el-table-column label="操作">
              <template slot-scope="obj">
                <el-button
                  type="warning"
                  icon="el-icon-edit"
                  plain
                  size="mini"
                  @click="modifibtn(obj.row.id)"
                  >修改</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  plain
                  icon="el-icon-delete"
                  @click="deletebtn(obj.row.id)"
                  >删除</el-button
                ></template
              ></el-table-column
            >
          </el-table>
        </div>
        <div class="page">
          <Page @shareData="shareData" :totalCount="count"></Page>
        </div>
      </div>
    </el-main>
    <el-dialog title="修改店铺" :visible.sync="modifishop">
      <el-form :model="shop" label-width="100px">
        <el-form-item label="店铺名称">
          <el-input v-model="shop.name"></el-input>
        </el-form-item>
        <el-form-item label="店铺地址">
          <div id="app">
            <el-cascader
              size="large"
              :options="options"
              v-model="selectedOptions"
              @change="handleChange"
            >
            </el-cascader>
          </div>
        </el-form-item>
        <el-form-item label="营业时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="shop.time"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="营业状态">
          <el-switch
            v-model="shop.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
        <el-form-item label="店铺照片">
          <el-upload
            class="avatar-uploader"
            action="http://49.235.240.193:8080/admin/upload/image"
            name="image"
            v-model="shop.imageUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="shop.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifishop = false">取 消</el-button>
        <el-button type="primary" @click="addbtn">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import Page from "../../components/common/Pagination.vue";
import { provinceAndCityData } from "element-china-area-data";
export default {
  data() {
    return {
      formLabelWidth: "120px",
      imageUrl: "",
      modifishop: false,
      shop: {},
      tableData: [],
      formInline: {
        search: "", //要搜索的内容
      },
      multipleSelection: [],
      // 条数
      pageCount: 5,
      // 页数
      nowPage: 1,
      count: 0,
      totalCount: "",
      ids: [],
      // value: true,
      options: provinceAndCityData,
      selectedOptions: [],
    };
  },
  components: {
    Page,
  },
  methods: {
    // 省城市
    handleChange(value) {
      console.log(value);
      this.shop.province = value[0];
      this.shop.city = value[1];
    },
    // 分页
    shareData(v) {
      console.log(v);
      this.pageCount = v.pageCount;
      this.nowPage = v.nowPage;
      this.getall();
    },
    addbtn() {
      this.modifishop = false;
      this.shop.image = this.imageUrl;
      console.log(this.shop);
      this.axios({
        method: "post",
        url: "/store/update",
        data: this.shop,
      }).then((res) => {
        console.log(res);
        this.getall();
      });
    },
    // 修改
    modifibtn(v) {
      this.modifishop = true;
      this.axios({
        method: "get",
        url: "/store/" + v,
      }).then((res) => {
        console.log(res);
        this.shop = {};
        this.shop = res.data.data;
        this.imageUrl = this.shop.image;
        this.selectedOptions = [];
        this.selectedOptions = [
          String(this.shop.province),
          String(this.shop.city),
        ];
        // this.getall()
        console.log(this.selectedOptions);
      });
    },
    deletebtn(v) {
      this.$confirm("此操作将删除该门店, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.axios({
            method: "get",
            url: "/store/delete/" + v,
          }).then((res) => {
            console.log(res);
            this.getall();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    Search() {
      console.log(this.formInline.search);
      this.axios({
        method: "get",
        url: "/store/" + this.formInline.search,
      }).then((res) => {
        console.log(res);
        if (res.data.data == null) {
          this.tableData = [];
        } else {
          this.tableData = [];
          this.tableData.push(res.data.data);
          document.getElementsByClassName("page")[0].style.display = "none";
        }
      });
    },
    handleSelectionChange(val) {
      this.ids = [];
      this.multipleSelection = val;
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.ids.push(this.multipleSelection[i].id);
      }
      console.log(this.ids);
    },
    delallshop() {
      // console.log("删除所有");

      this.$confirm("此操作将删除所有选中门店, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.axios({
            method: "post",
            url: "/store/deleteByIds",
            data: {
              ids: this.ids,
            },
          }).then((res) => {
            console.log(res);
            this.getall();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // console.log(this.ids);
    },
    addshop() {
      this.$router.push("/main/addshop");
    },
    getall() {
      this.axios({
        method: "post",
        url: "/store/list",
        data: {
          page: this.nowPage,
          pageSize: this.pageCount,
        },
      }).then((res) => {
        console.log(res.data.data);
        this.count = res.data.count;
        this.tableData = [];
        this.tableData = res.data.data;
        // console.log(this.tableData);
      });
    },
    handleAvatarSuccess(res, file) {
      // console.log(res);
      // this.imageUrl = URL.createObjectURL(file.raw);
      this.imageUrl = res.data;
      console.log(this.imageUrl);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  created() {
    this.getall();
  },
};
</script>

<style lang='less' scoped>
.fontsize {
  font-size: 1.4rem;
  font-weight: normal;
}
.search-container {
  background-color: #fff;
  border: 0.1rem solid #dbe0e9;
  .search-title {
    height: 4rem;
    background-color: #f2f2f2;
    box-sizing: border-box;
    border-bottom: 0.1rem solid #dbe0e9;
    line-height: 4rem;
    font-size: 1.4rem;
    padding-left: 3rem;
    font-weight: 500;
    color: #666666;
  }
  .form-search {
    margin: 1rem;
    padding: 1.5rem;
    background-color: #f5f9fc;
    box-sizing: border-box;
    .search-item {
      margin-bottom: 0;
    }
  }
}
.container {
  border: 1px solid black;
}
.headercontainer {
  padding: 20px;
}
.avatar-uploader {
  border: 1px dashed #000000;
  border-radius: 6px;
  cursor: pointer;
  width: 178px;
  height: 178px;
  position: relative;
  overflow: hidden;
}
.avatar-uploader:hover {
  border-color: #0475e7;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.tablem {
  margin-top: 35px;
}
.border {
  padding: 10px;
  border: rgb(207, 205, 205) solid 1px;
  background-color: white;
}
.tablepad {
  font-size: 1.4rem;
  margin: 5px;
  padding: 5px;
  background-color: #f5f9fc;
  display: flex;
  justify-content: flex-end;
}
.page {
  font-size: 1.4rem;
  margin: 5px;
  padding: 5px;
  background-color: #f5f9fc;
}
</style>